<template>
  <div class="login-container">
    <el-row>
      <el-col :lg="14" :md="11" :sm="24" :xl="14" :xs="24">
        <div style="color: transparent">占位符</div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import { domain } from '@/config'
  import { useSettingsStore } from '@/store/modules/settings'
  import { suiteId } from '@/config'
  import { getQrOauthUrl } from '@/api/user'
  // import router from '@/router'
  import qs from 'qs'

  export default defineComponent({
    name: 'Login',
    setup() {
      const route = useRoute()
      const router = useRouter()
      const settingsStore = useSettingsStore()
      const $baseNotify = inject('$baseNotify')

      const state = reactive({
        redirect: undefined,
      })

      const handleRoute = () => {
        return state.redirect === '/404' || state.redirect === '/403'
          ? '/'
          : state.redirect
      }

      /**
       * 企业微浏览器oauth认证跳转
       */
      const handleWxOAuthLogin = async () => {
        const redirect = encodeURIComponent(handleRoute())
        const redirect_uri = encodeURIComponent(
          `http://${domain}/dksb#callback?redirect=${redirect}`
          //`${window.location.protocol}//${window.location.host}${window.location.port == '80' ? '' : ':'+window.location.port}${window.location.pathname}#callback?redirect=${redirect}`
        )
        const state = 'xerllent'
        const oauthUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${suiteId}&redirect_uri=${redirect_uri}&response_type=code&scope=snsapi_privateinfo&state=${state}#wechat_redirect`
        window.location.href = oauthUrl
      }

      /**
       * pc浏览器扫码oauth认证跳转
       */
      const handleWxQrOAuthLogin = async () => {
        const redirect = encodeURIComponent(handleRoute())
        const redirectUri = encodeURIComponent(
          `http://${domain}/dksb#callback?redirect=${redirect}`
          //`${window.location.protocol}//${window.location.host}${window.location.port == '80' ? '' : ':'+window.location.port}${window.location.pathname}#callback?redirect=${redirect}`
        )
        getQrOauthUrl({ redirectUri, state: 'xerllent' })
          .then(({ data: qrOauthUrl }) => {
            window.location.href = qrOauthUrl
          })
          .catch(() => {
            $baseNotify('网络错误', '网络错误，请检查！')
            return
          })
      }

      onBeforeMount(() => {
        //如果有则接收跳转参数中的corpId
        let data = router.currentRoute.value.query
        if (!data.CORPID) data = qs.parse(document.location.search.slice(1))
        if (data && data.CORPID) {
          settingsStore.setCorpId(data.CORPID)
        }

        console.log('userAgent:' + navigator.userAgent)
        if (/wxwork/i.test(navigator.userAgent)) {
          handleWxOAuthLogin()
        } else {
          handleWxQrOAuthLogin()
        }
      })

      watchEffect(() => {
        state.redirect = (route.query && route.query.redirect) || '/'
      })

      return {
        ...toRefs(state),
      }
    },
  })
</script>

<style lang="scss" scoped>
  .login-container {
    height: 100vh;
    background: url('~@/assets/login_images/background.jpg') center center fixed
      no-repeat;
    background-size: cover;
  }
</style>
